<template>
	<view>
		<view>
			<u-search placeholder="请输入书籍名称" :clearabled="true" v-model="bookName" @custom="searchBook()"
				@search="searchBook()"></u-search>
		</view>
		<view v-if="books != null">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="8" textAlign="center">
					<view>书籍名称</view>
				</u-col>
				<u-col span="2" textAlign="center">
					<view>价格</view>
				</u-col>
				<u-col span="2" textAlign="center">
					<view>操作</view>
				</u-col>
			</u-row>
			<view v-for="book, index in books" :key="index">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="8" textAlign="center">
						<view>{{book.bookName}}</view>
					</u-col>
					<u-col span="2" textAlign="center">
						<view>{{book.bookPrice}}</view>
					</u-col>
					<u-col span="2" textAlign="center">
						<view>
							<u-button type="error" @click="openDialog(book, index)">删除</u-button>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<u-modal :show="show" confirmColor="red" showConfirmButton showCancelButton buttonReverse @confirm="del()"
			@cancel="cancelDialog()">
			<view>
				<u-row customStyle="margin-bottom: 10px" align="center">
					<u--text text="确认删除?" align="center"></u--text>
				</u-row>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<u--text text="名称:"></u--text>
					</u-col>
					<u-col span="10">
						<u--input disabled v-model="deleteBook.bookName"></u--input>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<u--text text="价格:"></u--text>
					</u-col>
					<u-col span="10">
						<u--input disabled v-model="deleteBook.bookPrice"></u--input>
					</u-col>
				</u-row>
			</view>
		</u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bookName: "",
				books: null,
				deleteBook: {},
				show: false,
				index: null
			}
		},
		methods: {
			openDialog(book, index) {
				this.deleteBook.bookId = book.bookId;
				this.deleteBook.bookName = book.bookName;
				this.deleteBook.bookPrice = book.bookPrice;
				this.index = index;
				this.show = true;
			},
			cancelDialog() {
				this.show = false;
				setTimeout(() => {
					this.deleteBook = {};
				}, 300);
			},
			del() {
				uni.$u.http.get('/book/deleteBookById', {
					params: {
						bookId: this.deleteBook.bookId
					}
				}).then(res => {
					this.books.splice(this.index, 1);
					this.showToast()
				}).catch(err => {
					console.log(err);
				})
				this.cancelDialog();
			},
			searchBook() {
				if (this.bookName != "") {
					uni.$u.http.get("/book/searchBook", {
						params: {
							bookName: this.bookName
						}
					}).then(res => {
						this.books = res;
					}).catch(err => {
						console.log(err);
					})
				}
			},
			showToast() {
				this.$refs.uToast.show({
					type: 'success',
					message: "删除成功",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				})
			}
		}
	}
</script>

<style>

</style>
